<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="/10.30/ThinkPHP/Application/Community/Public//styles/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#title {
			font-size: 20px;
			color: #000000;
		}
		
		header a {
			font-size: 17px !important;
			color: #929292;
			margin-top: 4px;
		}
		</style>
		<style type="text/css">
				.mui-btn,
			button,
			input[type=button],
			input[type=reset],
			input[type=submit] {
				transition: all;
				-webkit-transition-timing-function: linear;
				transition-timing-function: linear;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-btn-blue.mui-active:enabled,
			.mui-btn-blue:enabled:active,
			.mui-btn-primary.mui-active:enabled,
			.mui-btn-primary:enabled:active,
			input[type=submit].mui-active:enabled,
			input[type=submit]:enabled:active {
				color: #fff;
				background-color: #0062cc !important;
			}
			</style>
			<style>
			/*跨webview需要手动指定位置*/			
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}

			.mui-popover {
				height: 400px;
			}
			.protocol{
				background: #2daebf;
				text-align: center;
				color: #FFFFFF;
				height: 46px;
				line-height: 46px;
				font-size: 20px;
			}
			.mui-card-footer a{
				width: 50%;
				text-align: center;
				line-height: 44px;
				color: #000000;
			}
			#sure{
				background: #2daebf;
				color: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 id="title" class="mui-title">服务详情</h1>
		</header>
		<div class="mui-content">
		    <img src="/10.30/ThinkPHP/Application/Community/Public//images/bannerguwen.png" style="width: 100%;"/>
		    <ul class="mui-table-view">
		            <li class="mui-table-view-cell">
	                	<span>健康顾问上门服务</span>
	                	<span class="mui-pull-right">¥ <?php echo ($prise); ?>/小时</span>
		            </li>
		            <li class="mui-table-view-cell">
		                <span >服务区域:&nbsp;&nbsp;&nbsp;</span>
		                <span style="display: block;">渝中区  渝北区  九龙坡区 巴南区  江北区</span>
		            </li>
		            <li class="mui-table-view-cell">
		                <span >服务技能:&nbsp;&nbsp;&nbsp;</span>
		                <span style="display: block;">技能一  技能二  技能三  更多</span>
		            </li>
		            <li class="mui-table-view-cell">
		                <p>服务描述：</p>
                        <?php if(is_array($content)): foreach($content as $key=>$value): ?><p><?php echo ($value); ?></p><?php endforeach; endif; ?> 
		            </li>
		       </ul>		        
		        <a href="#middlePopover" id='save' class="mui-btn mui-btn-block mui-btn-primary" style="background-color: #2daebf;border: none;margin-top: 8px;">我要预约</a>
	     
		</div>
		<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-card">
				<div class="protocol">用户协议</div>
				<div class="mui-card-header">					
					<p>用户条款（版本：2016年10月30日）</p>
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						这些条款和条件（以下简称“用户条款”）适用于您访问和使用我们的网站www.chinaola.com下简称“网站”、服务、应用程序，以及在网站、服务、应用程序上或通过它们向您提供的所有信息、建议和/或服务。
在下载我们的应用程序和/或使用我们的服务之前，请仔细阅读本《用户条款》。
					</div>
				</div>
				<div class="mui-card-footer" style="padding: 0;">
					<a id="cancel">取消</a>
					<a id="sure" onclick="clicked('sub_order_confirm.html')">确定</a>
				</div>
			</div>

		</div>
		<script src="/10.30/ThinkPHP/Application/Community/Public//script/mui.min.js"></script>
		<script src="/10.30/ThinkPHP/Application/Community/Public//script/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/10.30/ThinkPHP/Application/Community/Public//script/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			$('#cancel').click(function(){
				mui('#middlePopover').popover('hide');
			});			
		</script>
	</body>

</html>